import { useEffect, useState } from 'react'
import reactLogo from './assets/react.svg'
import './App.css'
import axios from 'axios'
import { useRequest } from 'ahooks'
import LazyLoad from 'react-lazyload'

function App() {
  const getMovies = () => {
    return new Promise((resolve, reject) => {
      axios.get('init_movies')
        .then(res => {
          console.log(res.data)
          resolve(res.data)
        })
    })
  }
  let { data: movies, error, loading } = useRequest(getMovies)
  useEffect(() => {
    
    // axios.get('init_movie')
    //   .then(res => {
    //     console.log(res)
    //   })
  }, [])
  return (
    <div className="App">
      {error && <div>出错了</div>}
      {loading && <div>加载中...</div>}
      {movies && Array.isArray(movies) && movies.map((item, i) => <div key={i}>
        <div>{item.title}</div>
        <div>{item.content}</div>
        <div>
          <LazyLoad>
            <img src={item.avatar}/>
          </LazyLoad>
          
        </div>
      </div>)}
    </div>
  )
}

export default App
